<template>
  <div class="home center">
    <div class="name">{{ item.title }}</div>
    <div class="info">
      <div>创建时间：{{ item.creationTime }}</div>
      <div>处理状态: {{ item.complaintType == 1 ? "已处理" : "未处理" }}</div>
    </div>
    <div class="text" style="margin-bottom: 40px">
      <h4>投诉内容</h4>
      <div class="text_body" v-html="item.complaintText"></div>
    </div>
    <div class="text">
      <h4>处理结果</h4>
      <div
        class="text_body"
        v-if="item.processingResult != '' && item.processingResult != null"
        v-html="item.processingResult"
      ></div>
      <div
        style="
          text-align: center;
          color: #0e9d00;
          font-weight: 600;
          font-size: 25px;
        "
        v-else
      >
        等待处理
      </div>
    </div>
    <div>
      <div
        class="attachment"
        v-if="item.attachment != '' && item.attachment != null"
      >
        <div class="name">投诉附件</div>
        <div class="sum">
          <span class="el-icon-paperclip"></span>
          附件{{ item.attachment ? item.attachment.length : "0" }}个
        </div>
        <div
          class="files"
          v-for="(fileName, index) in item.attachment"
          :key="index"
        >
          <div class="pointer" @click="downloadFile(fileName)">
            <div class="file xf">
              <div class="img">
                <i class="el-icon-document"></i>
              </div>
              <div class="body">
                <div
                  style="
                    width: 170px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{ $fileNameValidation(fileName) }}
                </div>
                <div style="font-size: 13px">未知大小</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getComplaintListItem } from "@/api/procurement/complaint";
import axios from "axios";
export default {
  name: "noticeDetails",
  data() {
    return {
      item: {},
    };
  },
  mounted() {
    getComplaintListItem({ id: this.$route.query.complaintId }).then((res) => {
      this.item = res.data;
      if (this.item.attachment != "" && this.item.attachment != null) {
        this.item.attachment = this.item.attachment.split(",");
      }
    });
  },
  computed: {},
  methods: {
    //附件下载
    downloadFile(fileName) {
      console.log(fileName);
      axios({
        method: "get",
        url:
          process.env.VUE_APP_BASE_API +
          "procurement/downloadFile?fileName=" +
          fileName,
        responseType: "blob",
        headers: {
          "data-type": "Buffer",
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
        },
      }).then((res) => {
        const url = window.URL.createObjectURL(new Blob([res.data]));
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        let regular =
          /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/;
        if (regular.test(fileName)) {
          fileName = fileName.slice(36);
        }
        link.setAttribute("download", fileName); // 指定下载后的文件名，防跳转
        document.body.appendChild(link);
        link.click();
      });
    },
  },
};
</script>
<style scoped>
.text_body {
  margin-left: 50px;
  text-indent: 2em;
}
a {
  color: #000;
}
.el-icon-document {
  font-size: 50px;
  background-color: #fff;
}
>>> .el-image {
  width: 100%;
  height: 100%;
}
.home {
  padding-bottom: 100px;
}
.name {
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  padding: 30px 0;
}
.info {
  display: flex;
  justify-content: center;
  color: #666;
  margin-bottom: 30px;
}
.info > div {
  margin: 0 10px;
  font-size: 14px;
}
.text {
  line-height: 27px;
  padding: 0 100px;
  color: #656565;
}
.text > h4 {
  font-size: 28px;
  color: #000;
  text-align: left;
  margin: 30px 0;
}
.attachment {
  padding: 0 100px;
}
.files {
  display: inline;
  display: flex;
  border-radius: 4px;
  padding: 10px;
  flex-wrap: wrap;
}
.file {
  width: 245px;
  display: flex;
  background-color: #e5e5e5;
  border-radius: 5px;
}
.file > .img {
  width: 70px;
  height: 70px;
  margin-right: 10px;
  text-align: center;
  line-height: 90px;
}
.file > .body {
  margin-top: 10px;
}
.attachment > .name {
  font-size: 20px;
  font-weight: 600;
  text-align: left;
}
.attachment > .sum {
  margin-bottom: 20px;
}
</style>
